<template>
  <div class="app-container">
    <el-form
      ref="imgUploadData"
      :rules="rules"
      :model="imgUploadData"
      label-width="100px"
      class="padding-20"
    >
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item
            label="用户ID"
            prop="userId"
          >
            <el-input v-model="imgUploadData.userId"></el-input>
          </el-form-item>
          <el-form-item
            label="选择时间"
            prop="ultrasoundTime"
          >
            <el-date-picker
              v-model="imgUploadData.ultrasoundTime"
              type="datetime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          {{this.imgListData}}
          <el-form-item label="">
            <div class="upload">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :on-remove="handleRemove"
                :file-list="fileList2"
                name="files"
                :on-success="handleAvatarSuccess"
                list-type="picture"
                multiple
              >
                <el-button
                  size="small"
                  type="primary"
                >选择图片</el-button>
                <!-- <div
                  slot="tip"
                  class="el-upload__tip"
                >只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="fetchUploadImg('imgUploadData')"
            >提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

  </div>
</template>
<script>
import { formatDateTime } from "@/utils/common";
import { fetchUploadImg } from "@/api/other";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      imgUploadData: {
        userId: "",
        ultrasoundTime: ""
      },
      rules: {
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" }
        ],
        ultrasoundTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      },
      //上传图片
      fileList2: [],
      //获取到服务器上图片
      imgListData: [],
      //上传链接
      uploadUrl: "",
      imgHeaders: {
        Authorization: ""
      }
    };
  },
  mounted() {
    this.imgHeaders.Authorization = getToken();
    //上传图片链接
    this.uploadUrl = process.env.BASE_API + "/picture/upload";
  },
  methods: {
    initData() {},
    handleRemove(file, fileList) {
      this.imgListData = "";
    },
    handleAvatarSuccess(res, file) {
      this.imgListData = res.data;
    },
    fetchUploadImg(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.postImgLoadData();
        } else {
          return false;
        }
      });
    },
    async postImgLoadData() {
      let uploadData = await fetchUploadImg({
        userId: this.imgUploadData.userId,
        ultrasoundTime: formatDateTime(this.imgUploadData.ultrasoundTime),
        ovuolaImage: this.imgListData
      });
      if (uploadData.status == "200") {
        this.$message({
          type: "success",
          message: "上传成功"
        });
      } else {
        this.$message({
          type: "error",
          message: uploadData.msg
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.padding-20 {
  padding: 20px;
}
.message_template {
  text-align: center;
  color: #999;
}
.message_template_top {
  font-size: 16px;
  color: #000;
}
.border_top {
  border-top: 1px solid #000;
}
.upload {
  width: 360px;
}
</style>

